import { defineComponent, computed, ref, watch } from 'vue';
import { isEqual, cloneDeep } from 'lodash-es';
import { handleCheckFilterConditionTree } from './conditionFormConfig';
import ConditionGroup from '@/components/conditionGroup/index';
import AddConditionButton from '@/components/conditionGroup/AddConditionButton';
import ConditionConfig from './conditionConfig.vue';
import style from './style.module.less';
export default defineComponent({
    name: 'FilterComponent',
    components: {
        ConditionGroup,
        AddConditionButton,
        ConditionConfig
    },
    props: {
        /**
         * 数据格式参考
         * [
         *  {
         *    filterColumnName: 'id', // 选中字段后，字段的值（相当于字段id）
         *    title: '字段名称', // 显示到页面上的字段名称
         *    type: 'DATE' // 字段类型
         *  }
         * ]
         */
        fieldList: {
            type: Array,
            default: () => []
        },
        // 动态值下拉字段
        dynamicFieldList: {
            type: Array,
            default: () => []
        },
        /**
         * 传入按钮的text,默认 搜索
         */
        btnText: {
            type: String,
            default: ''
        },
        // 等同于filterConditionTree, 目的是用于数据回填
        condition: {
            type: Object,
            default: () => ({})
        },
        // 仅仅用于数据回填,展示
        onlyShow: {
            type: Boolean,
            default: false
        },
        // 是否展示公式功能按钮
        showFormulaBtn: {
            type: Boolean,
            default: false
        },
        // 是否显示搜索按钮
        showSearchBtn: {
            type: Boolean,
            default: true
        },
        filterDynamicFieldFunc: {
            type: Function
        }
    },
    setup(props, { expose }) {
        const conditionGroup = ref();
        const filterConditionTree = ref({});
        watch(() => props.condition, () => {
            if (!isEqual(props.condition, filterConditionTree.value)) {
                filterConditionTree.value = cloneDeep(props.condition);
            }
        }, {
            immediate: true,
            deep: true
        });
        const btnGroupClass = computed(() => {
            return props.onlyShow ? style.hide : style['condition-button-group'];
        });
        // 添加条件过滤
        const handleAddCondition = operator => {
            conditionGroup.value.handleAddCondition(operator, {
                filterType: 'CONDITION',
                filterCondition: {
                    filterColumnName: '',
                    type: '',
                    conditionType: '',
                    dateFormat: 'yyyy-MM-dd',
                    value: null
                }
            });
        };
        // 选中条件节点
        const handleSelectConditionNode = (currentNode, parentNode) => {
            conditionGroup.value.handleSelectCondition(currentNode, parentNode);
        };
        /**
         * 组件是否填写完整的验证
         */
        const handleValidate = () => {
            if (!handleCheckFilterConditionTree(filterConditionTree.value)) {
                return Promise.reject(filterConditionTree.value);
            }
            return Promise.resolve(filterConditionTree.value);
        };
        const handleDeleteAllNode = () => {
            conditionGroup.value.handleDeleteAllCondition();
        };
        expose({
            filterConditionTree,
            // 暴露给组件外校验过滤条件是否合法的方法
            handleValidate,
            handleDeleteAllNode
        });
        return () => (<div class={style.box}>
        {props.onlyShow && <div class={style.mark}></div>}
        <condition-group ref={conditionGroup} v-model:modelValue={filterConditionTree.value}>
          {{
                buttonGroup: () => (<div class={btnGroupClass.value}>
                {/* 添加条件过滤的按钮 */}
                <add-condition-button class={style['condition-button']} buttonType="条件" onClick={handleAddCondition}/>
              </div>),
                // 条件过滤
                expressionSlot: ({ expression, node, parentNode }) => {
                    if (expression.filterType === 'CONDITION') {
                        return (<condition-config condition-config={expression.filterCondition} field-list={props.fieldList} dynamic-field-list={props.dynamicFieldList} filterDynamicFieldFunc={props.filterDynamicFieldFunc} onSelectCondition={() => handleSelectConditionNode(node, parentNode)}/>);
                    }
                }
            }}
        </condition-group>
      </div>);
    }
});
//# sourceMappingURL=filterComponent.jsx.map